<template>
  <div style="position: relative">
    <h3>用户详情</h3>
    <form action="" id="form">
      <p>
        <span>账号:</span>
        <input type="text" v-model="userInfo.name" />
      </p>

      <p>
        <span>密码:</span>
        <input type="text" v-model="userInfo.password" />
      </p>

      <p>
        <span>邮箱:</span>
        <input type="text" v-model="userInfo.email" />
      </p>
    </form>
    <button @click="goBack">返回</button>
  </div>
</template>
<script>
import { getUserInfoById } from '@/request/Request.js'
export default {
  props: ['id'],
  data () {
    return {
      userInfo: {}
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    async getUserInfo () {
      const data = await getUserInfoById('/users', this.id)
      console.log(data)
      this.userInfo = data
    }
  },
  mounted () {
    this.getUserInfo()
  }
}
</script>
<style scoped>
#form {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  width: 400px;
  height: 150px;
  border: 1px solid orange;
}
#form p {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
